<template>
  <div class="content">
    <div class="message" id="message-box">
      <div v-for="(msg, index) in msgList" :key="index" :class="{
          'user': msg.role === 'user',
          'assistant': msg.role === 'assistant'
        }">
        <div>
          <div>
            <img class="role-img" :src="userImg" v-if="msg.role === 'user'" />
          </div>
          <div class="imgbox" v-if="msg.role === 'assistant'">
            <img class="role-img" :src="aiImg" />
            <div class="name">讯飞AI</div>
          </div>
        </div>
        <div v-highlight v-html="msg.content"></div>
        <button v-if="msg.role === 'assistant'" @click="copyToClipboard(msg.content)">复制</button>
      </div>
    </div>

    <div class="footer">
      <textarea rows="5" placeholder="请输入问题" class="text" v-model="msgValue"></textarea>
      <button class="btn" @click="submitMsg">发送</button>
      <button class="btn pause-btn" @click="pauseMsg">暂停</button>
    </div>
  </div>
</template>

<script setup>
import userImg from "../assets/user.png"
import aiImg from "../assets/ai.png"
import { nextTick, onMounted, ref } from 'vue'
import TTSRecorder from "../utils/TTSRecorder"
import { userMsgStore } from '../stores/msgStore'

const msgStore = userMsgStore()
const msgValue = ref("")
let ttsRecorder = new TTSRecorder()
const msgList = ref([])
let msgDom = ref(null)
import { marked } from 'marked'

onMounted(() => {
  msgDom.value = document.getElementById("message-box")
  msgList.value = msgStore.list
  scroll()
})

// 滚动到最底部
const scroll = () => {
  nextTick(() => {
    msgDom.value.scrollTop = msgDom.value.scrollHeight
  })
}

// 发送消息
const submitMsg = async () => {
  msgStore.resetDisplay()  // 重置显示状态
  msgStore.userAddMsg(msgValue.value)
  msgValue.value = ""
  // 开始提问
  ttsRecorder.start(msgStore, msgDom)
  scroll()
}

const copyToClipboard = (content) => {
  navigator.clipboard.writeText(content).then(() => {
    //alert('复制成功！')
  }).catch(err => {
    //alert('复制失败：' + err)
  })
}

// 暂停消息显示
const pauseMsg = () => {
  msgStore.pauseDisplay()
}
</script>

<style scoped lang="less">
.content {
  background-image: url('./src/assets/image/cat.jpg');
  background-position: center;
  height: 95%;
  position: relative;

  .message {
    position: absolute;
    top: 0;
    left: 10%;
    right: 20%;
    bottom: 150px;
    display: flex;
    overflow: auto;
    flex-direction: column;

    &::-webkit-scrollbar {
      display: none; /* 滚动条宽度 */
    }

    &::-webkit-scrollbar-thumb {
      background-color: #888; /* 滚动条颜色 */
      border-radius: 4px; /* 滚动条圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #555; /* 滚动条悬停颜色 */
    }

    &::-webkit-scrollbar-track {
      background-color: #f1f1f1; /* 滚动条轨道颜色 */
    }

    .user {
      background-color: #f7f7f7;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      border-bottom: 1px solid #dfdfdf;
      border-radius: 20px; /* 滚动条圆角 */
    }
    .assistant {
      background-color: #ffffff;
      padding: 15px;
      border-radius: 20px; /* 滚动条圆角 */
      box-sizing: border-box;
      border-bottom: 1px solid #dfdfdf;
    }
    button {
      margin-top: 10px;
      padding: 5px 10px;
      border: none;
      background-color: #1a60ea;
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #004bb5;
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 20%;
    display: flex;
    justify-content: space-between;
    border-radius: 20px; /* 滚动条圆角 */
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #dfdfdf;

    .text {
      flex: 1;
      border: 1px solid #dfdfdf;
      border-radius: 5px;
      padding: 10px;
      resize: none;
      outline: none;
      font-size: 15px;
      line-height: 1.5;
      &::-webkit-scrollbar {
        display: none;
      }
    }

    .btn {
      margin-left: 5px;
      width: 50px;
      height: 50px;
      background-color: #1a60ea;
      color: white;
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #004bb5;
    }

    .pause-btn {
      background-color: #ff9800;
    }

    .pause-btn:hover {
      background-color: #e68900;
    }
  }

  @media screen and (max-width: 768px) {
    .message, .footer {
      left: 0;
      right: 0;
    }
    .message {
      bottom: 100px;
    }
    .footer {
      bottom: 100px;
    }
  }
}

.imgbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;

  .name {
    font-size: 13px;
    color: #fd919e;
    font-weight: 400;
  }
}

.role-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
</style>
